<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>YOLOv5 图片上传识别</title>
</head>
<body>
  <h2>上传图片进行目标检测</h2>
  <input type="file" id="imageInput" accept="image/*">
  <button onclick="uploadImage()">上传并识别</button>
  <pre id="result"></pre>

  <script>
    function uploadImage() {
      const input = document.getElementById('imageInput');
      const file = input.files[0];
      if (!file) {
        alert("请选择图片文件！");
        return;
      }

      const formData = new FormData();
      formData.append("image", file);

      fetch("http://139.196.110.145:5000/detect", {
        method: "POST",
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        document.getElementById("result").textContent = JSON.stringify(data, null, 2);
      })
      .catch(error => {
        console.error("上传失败:", error);
        alert("识别失败，请检查服务器状态！");
      });
    }
  </script>
</body>
</html>
